<template>
  <div class="app-container home">
    <h1 align="center" style="font-size: 48px;color: #f30909;margin-bottom: 32px;">五组网约车后台管理系统</h1>
    <div class="snowflake-container" ref="snowflakeContainer"></div>
    <div class="canvas" role="img" aria-label="一个站在雪地小山上的圣诞老人卡通形象。">
      <div class="hand"></div>
      <div class="hand"></div>
      <div class="arms"></div>
      <div class="leg"></div>
      <div class="leg"></div>
      <div class="body">
        <div class="belt"></div>
      </div>
      <div class="beard"></div>
      <div class="head">
        <div class="cheek"></div>
        <div class="cheek"></div>
        <div class="eye"></div>
        <div class="eye"></div>
        <div class="mustache"></div>
        <div class="mustache"></div>
        <div class="hat"></div>
      </div>
    </div>


    <el-dialog title="更新提醒" :visible.sync="dialogFormVisible" :show-close="false">
      <el-form :model="form">
        <h5>Hi, all,本次更新主要包含以下内容: </h5>
        修复BUG
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="download">立即更新</el-button>
        <el-button @click="dialogFormVisible = false">下次再说</el-button>
      </div>
    </el-dialog>


    <el-dialog :visible.sync="dialogFormVisible1" :close-on-click-modal = "false" :show-close="false">
      <h1 align="center">发现新版本</h1>
      <el-form :model="form" show-close:true>
        <h5>Hi, all,本次更新主要包含以下内容: </h5>
        修复BUG
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="download">立即更新</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {downloadFile, versionUpdate} from "@/api/apply/apply";
import '@/views/圣诞节.css';

export default {
  name: "Index",
  data() {
    return {
      dialogFormVisible:false,
      dialogFormVisible1:false,
      form:{}
    };
  },
  mounted() {
    this.createSnowflakes();
    this.versionUpdateApply();
  },
  methods: {
    createSnowflakes() {
      const container = this.$refs.snowflakeContainer;

      for (let i = 0; i < 50; i++) {
        const snowflake = document.createElement("div");
        snowflake.className = "snowflake";
        snowflake.style.left = `${Math.random() * 100}vw`;
        snowflake.style.animationDuration = `${Math.random() * 2 + 1}s`;
        container.appendChild(snowflake);
      }
    },

    download(){
      downloadFile(this.apply.applyPackage).then(res=>{
        console.log(res);
      })
      updateUserVersion(this.apply).then(
          res=>{
            this.$message.success("更新成功")
          }
      )
    },
    versionUpdateApply() {
      versionUpdate().then(res => {
          this.apply = res.data
          if (this.apply.noticeType === 1) {
            this.dialogFormVisible1 = true
          }
          if (this.apply.noticeType === 2) {
            this.dialogFormVisible = true
          }
      })
    }
  },
  created() {
    this.versionUpdateApply()
  }
};
</script>

<style lang="scss" scoped>

@keyframes fall {
  0% {
    transform: translateY(-100vh);
  }
  100% {
    transform: translateY(100vh);
  }
}
.home {
  blockquote {
    padding: 10px 20px;
    margin: 0 0 20px;
    font-size: 17.5px;
    border-left: 5px solid #eee;
  }

  hr {
    margin-top: 20px;
    margin-bottom: 20px;
    border: 0;
    border-top: 1px solid #eee;
  }

  .col-item {
    margin-bottom: 20px;
  }

  ul {
    padding: 0;
    margin: 0;
  }

  font-family: "open sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 13px;
  color: #676a6c;
  overflow-x: hidden;

  ul {
    list-style-type: none;
  }

  h4 {
    margin-top: 0px;
  }

  h2 {
    margin-top: 10px;
    font-size: 26px;
    font-weight: 100;
  }

  p {
    margin-top: 10px;

    b {
      font-weight: 700;
    }
  }

  .update-log {
    ol {
      display: block;
      list-style-type: decimal;
      margin-block-start: 1em;
      margin-block-end: 1em;
      margin-inline-start: 0;
      margin-inline-end: 0;
      padding-inline-start: 40px;
    }
  }
}

</style>
